<template>
  <div class="box">
    <div>
      {{$t("dashboard.test")}}{{$t("dashboard.interface")}}
      <el-button @click="handleLogin" :loading="loginLoading">{{$t("dashboard.test")}}{{$t("dashboard.interface")}}</el-button>
    </div>
    <div>
      {{$t("dashboard.switchLanguage")}}
      <el-button @click="toggleLanguage" type="primary">{{store.language}}</el-button>
    </div>
    <div>
      {{$t("dashboard.switchTheme")}}
      <el-button @click="toggleTheme">{{store.theme}}</el-button>
    </div>
    <div>
      {{$t("dashboard.test")}} pinia
      <el-button @click="toggleDevice">{{store.device}}</el-button>
      <el-button @click="setPromise" :loading="loading">setPromise</el-button>
    </div>
    <div>
      {{$t("dashboard.test")}} vueUse
      <el-button @click="fullScreen">全屏</el-button>
    </div>
    <div>
      {{$t("dashboard.test")}} emit
      <Info type="111" @update="update"></Info>
    </div>
    <div>
      <el-button @click="toPage('/form')">表单组件</el-button>
      <el-button @click="toPage('/table')">表格组件</el-button>
    </div>
    <el-table :data="[]"></el-table>
  </div>
</template>
<script setup lang="ts">
import { loginApi } from '@/api/user'
import { useI18n } from 'vue-i18n'
import { useFullscreen } from '@vueuse/core'
import Info from './compontents/info.vue'
import { useAppStore } from '@/store/modules/app'
import { makeOptions, valueToLabel } from '@/utils/dictionary'
const obj = makeOptions('STATE_TYPE', 'user')
console.log('makeOptions', obj)
console.log('valueToOption', valueToLabel('1', 'STATE_TYPE', 'user'))
interface LoginObj {
  name:string
  username: string
  email: string
}
const loginLoading = ref<boolean>(false)
function handleLogin (): void {
  loginLoading.value = true
  const loginData = reactive<LoginObj>({
    name: 'Test User',
    username: 'testuser',
    email: 'testuser@example.com'
  })
  loginApi(loginData)
    .then((res:any) => {
      console.log(res)
    })
    .catch(() => {
      console.log('验证失败')
    })
    .finally(() => {
      loginLoading.value = false
    })
}
const store = useAppStore()
// 切换语言
const { locale } = useI18n()
locale.value = store.language
function toggleLanguage (): void {
  store.$patch({
    language: store.language === 'zh-cn' ? 'en' : 'zh-cn'
  })
  locale.value = store.language
}
// 切换主题
function toggleTheme (): void {
  store.$patch({
    theme: store.theme === 'dark' ? 'light' : 'dark'
  })
}
// 测试 pinia
function toggleDevice () {
  store.toggleDevice(store.device === 'mobile' ? 'default' : 'mobile')
}
// 设置Promise
const loading = ref<boolean>(false)
function setPromise (): void {
  loading.value = true
  store.getData('test').then(res => {
    console.log('setPromise:' + res)
    loading.value = false
  })
}
// 测试 emit
function update (val: string): void {
  console.log('🚀 ~ update ~ val:', val)
}
// 测试 vueUse
const { isFullscreen, toggle } = useFullscreen()
const fullScreen = (): void => {
  console.log('isFullScreen=', isFullscreen.value)
  toggle()
}
// 路由跳转
const router = useRouter()
const toPage = (url: string): void => {
  router.push(url) // 字符串形式跳转
}
</script>
<style lang="scss" scoped>
  .box{
    // @include flex();
    color: var(--font-primary);
    background-color: var(--background-main);
  }
</style>
